<template>
  <div>
    <Divider>搜索</Divider>

    <sh-search
      :configs="getFormConfigs(current)"
      :model="model"
      ref="ShSearchRef"
      @search="searchForm"
      @reset="resetForm"
      @change="changeValue"
    />

    <Button @click="handleChange">阿牛</Button>
  </div>
</template>

<script setup>
import { onMounted, unref, ref, computed } from 'vue';
import ShSearch from '@/components/sh-search';
const formConfigs = [
  {
    type: 'input',
    label: '创建人',
    key: 'category',
    defaultValue: 'king',
  },
  { type: 'datePicker', label: '创建时间', key: 'create' },
  {
    type: 'select',
    label: '产品类型',
    key: 'productType',
  },
  {
    type: 'input',
    label: '创建人',
    key: 'category2',
  },
  { type: 'datePicker', label: '创建时间', key: 'create', readonly: true },
  {
    type: 'select',
    label: '产品类型',
    key: 'productType',
  },
  {
    type: 'input',
    label: '创建人',
    key: 'category3',
  },
  { type: 'datePicker', label: '创建时间', key: 'create' },
];

const current = ref(0);

const getFormConfigs = computed(() => {
  return current => {
    return [
      {
        type: 'select',
        label: '产品类型',
        key: 'productType',
        options:
          current === 0
            ? [{ name: '编辑中', value: '2' }]
            : [
                { name: '编辑中', value: '2' },
                { name: '审核中', value: '1' },
              ],
      },
      {
        type: 'select',
        label: '产品类型2',
        key: 'productType2',
        options: [{ name: '编辑中', value: '2' }],
      },
    ];
  };
});

const handleChange = () => {
  current.value = 1;
};

let model = ref({
  category3: '3333',
});

const searchForm = e => {
  console.log('search', e.value);
};
const resetForm = e => {
  console.log('reset', e.value);
};
const changeValue = e => {
  console.log('change', e);
};

// const ShSearchRef = ref(null);
// onMounted(() => {
//   if (ShSearchRef.value) {
//     console.log(unref(ShSearchRef).getSearchValue);
//   }
// });
</script>

<style scoped></style>
